<template>
  <div>
    <el-form :inline="true" :model="searchForm" ref="formRef">
      <el-form-item label="俱乐部名称" prop="name">
        <el-input v-model="searchForm.name" placeholder="请输入俱乐部名称" />
      </el-form-item>
      <el-form-item label="俱乐部类型" prop="status">
        <el-select v-model="searchForm.type" placeholder="请选择俱乐部类型">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="state.tableData" border style="width: 100%">
      <el-table-column prop="clubName" label="俱乐部名称"/>
      <el-table-column prop="establishedDate" label="成立时间"></el-table-column>
      <el-table-column  label="操作" >
        <template #default="scope">
          <!-- <el-button @click="handleDel(scope.row.id)">移除</el-button> -->
          <el-button @click="openDrawer(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="state.total" :limit="state.pageSize" :page-change="PageChange" />
    <el-drawer v-model="drawerVisible" size="60%">
      <template #header>
        <h4>{{ drawerInfo.currentClub.clubName }}</h4>
      </template>
      <template #default>
        <div style="padding: 30px;">
          <el-button type="primary" @click="handleOpenDialog" style="margin-bottom: 10px;" v-if="drawerInfo.currentClub.clubType === ClubTypeEnum.ARCHERY">
            添加上课记录
          </el-button>
          <el-table :data="drawerInfo.memberList" border ref="tableRef" style="width: 100%" @selection-change="(val) => multipleSelection = val">
            <el-table-column type="selection" width="55" v-if="drawerInfo.currentClub.clubType === ClubTypeEnum.ARCHERY" />
            <el-table-column label="成员头像">
              <template #default="scope">
                <img :src="scope.row.avatarPhoto" alt="" style="width: 60px;height: 60px;border-radius: 50%;">
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="成员名称"/>
            <el-table-column prop="joinDate" label="加入时间"></el-table-column>
            <el-table-column  label="操作" >
              <template #default="scope">
                <el-button @click="handleDel(scope.row.wxUserId)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
            v-model="dialogVisible"
            title="添加上课记录"
            width="500"
          >
            <div style="display: flex;align-items: center;">
              <div>上课时间：&nbsp;&nbsp;</div>
              <el-date-picker
                v-model="recordTime"
                type="date"
                placeholder="请选择上课日期"
                value-format="YYYY-MM-DD"
              />
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleDialogConfirm">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import {  reactive, ref } from "vue";
import Pagination from "@/components/pagination/index.vue";
import { getClubList, getClubMemberList, kickOutClub, clubMemberSign } from '@/api/club/index'
import { FormInstance } from "element-plus/lib/components/form/index.js";

const enum ClubTypeEnum {
  /**
   * 足球
   */
  FOOTBALL = "football",
  
  /**
   * 棒球
   */
  BASEBALL = "baseball",
  
  /**
   * 射箭
   */
  ARCHERY = "archery"
}

const typeOptions = [
  {
    label: "足球",
    value: ClubTypeEnum.FOOTBALL,
  },
  {
    label: "棒球",
    value: ClubTypeEnum.BASEBALL,
  },
  {
    label: "射箭",
    value: ClubTypeEnum.ARCHERY,
  }
]

const multipleSelection = ref<any[]>([])
const dialogVisible = ref(false)
const recordTime = ref("")
const tableRef = ref(null)

const drawerVisible = ref(false)
const drawerInfo = reactive({
  currentClub: {
    clubName: '',
    clubType: ''
  },
  memberList: []
})

const formRef = ref<FormInstance>();
const searchForm = reactive({
  name: "",
  type: "",
});
const state = reactive<{
  total: number;
  pageNum: number;
  pageSize: number;
  tableData: any;
}>({
  total: 10,
  pageNum: 1,
  pageSize: 10,
  tableData: [],
});

const onSubmit = () => {
  getTableData();
};
const onReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  searchForm.name = "";
  searchForm.type = "";
  getTableData();
};

// 分页
const PageChange = (page: number) => {
  state.pageNum = page;
  getTableData();
};

const getTableData = () => {
  getClubList({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
    extraParamMap: {
      raceName: searchForm.name,
      clubType: searchForm.type,
    },
  }).then((res) => {
    state.tableData = res.data.rows || [];
    state.total = res.data.total || 0;
  });
};
getTableData();

const fetchClubMemberList = () => {
  getClubMemberList({
    pageNum: 1, 
    pageSize: 1000,
    extraParamMap: {
      // @ts-ignore
      clubId: drawerInfo.currentClub.clubId
    }
  }).then((res: any) => {
    drawerInfo.memberList = res.data.rows
  })
}

const openDrawer = (item:any) => {
  drawerVisible.value = true
  drawerInfo.currentClub = item
  fetchClubMemberList()
}

const handleDel = (wxUserId: string) => {
  // 移除
  ElMessageBox.confirm("确认要移除该俱乐部吗？移除后将无法恢复！", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    kickOutClub({
      // @ts-ignore
      clubId: drawerInfo.currentClub.clubId,
      wxUserId: wxUserId
    }).then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      // 更新数据
      fetchClubMemberList();
    });
  });
};

const handleOpenDialog = () => {
  if(!multipleSelection.value?.length) {
    ElMessage({
      type: "warning",
      message: "请选择成员",
    });
    return
  }
  dialogVisible.value = true
}
const handleDialogConfirm = async () => {
  if(!recordTime.value) {
    ElMessage({
      type: "warning",
      message: "请选择上课日期",
    });
    return
  }
  const params = {
    // @ts-ignore
    clubId: drawerInfo.currentClub.clubId,
    clubMemberIdList: multipleSelection.value.map(i => i.clubMemberId),
    signDate: recordTime.value
  }
  await clubMemberSign(params)
  ElMessage({
    type: "success",
    message: "添加成功",
  });
  dialogVisible.value = false
  // @ts-ignore
  tableRef.value.clearSelection()
}
</script>

<style lang="scss" scoped>
.el-form .el-form-item:last-of-type {
  margin-bottom: 18px !important;
}
</style>
